import { Condition } from "@/components/Condition";
import { randomNumber } from "@/utils";
import {
  FileAddOutlined,
  FileWordFilled,
  FileWordOutlined,
  SendOutlined,
} from "@ant-design/icons";
import { Button, Empty, Input } from "antd";
import { PropsWithChildren, useLayoutEffect, useRef, useState } from "react";
import markdownIt from "markdown-it";

interface IChatPanelProps {
  className?: string;
  defaultList?: any[];
  onSend?: (msg: string) => void;
}

const md = new markdownIt();

export function ChatPanel(props: PropsWithChildren<IChatPanelProps>) {
  const { onSend, defaultList } = props;
  const listRef = useRef(null);
  const [searchVal, setSearchVal] = useState("");
  const [list, setList] = useState(defaultList);
  // const [list2, setList2] = useState([
  //   { key: 1, role: "user", text: "员工旷工，该解除劳动合同？" },
  //   {
  //     key: 2,
  //     role: "lawer",
  //     text: "1、一般来说，累计旷工多日或连续旷工3-5日以上的，用人单位根据规章制度进行旷工严重违纪的解除风险较小。但是鉴于学校的考勤可能不是特别规范，直接以旷工为由来解除合同，会有法律的风险。所",
  //   },
  //   { key: 3, role: "user", text: "员工旷工，该解除劳动合同？" },
  //   {
  //     key: 4,
  //     role: "lawer",
  //     text: "1、一般来说，累计旷工多日或连续旷工3-5日以上的，用人单位根据规章制度进行旷工严重违纪的解除风险较小。但是鉴于学校的考勤可能不是特别规范，直接以旷工为由来解除合同，会有法律的风险。所",
  //   },
  //   { key: 5, role: "user", text: "员工旷工，该解除劳动合同？" },
  //   {
  //     key: "6",
  //     role: "lawer",
  //     text: "1、一般来说，累计旷工多日或连续旷工3-5日以上的，用人单位根据规章制度进行旷工严重违纪的解除风险较小。但是鉴于学校的考勤可能不是特别规范，直接以旷工为由来解除合同，会有法律的风险。所",
  //   },
  //   { key: "7", role: "user", text: "员工旷工，该解除劳动合同？" },
  //   {
  //     key: "7",
  //     role: "user",
  //     type: "file",
  //     name: "合同多日或连续旷工3-5日以上.docx",
  //     size: "20kb",
  //   },
  //   {
  //     key: "8",
  //     role: "lawer",
  //     text: "1、一般来说，累计旷工多日或连续旷工3-5日以上的，用人单位根据规章制度进行旷工严重违纪的解除风险较小。但是鉴于学校的考勤可能不是特别规范，直接以旷工为由来解除合同，会有法律的风险。所",
  //   },
  // ]);

  const onSendMsg = () => {
    const v = searchVal;
    onSend(v);
    setList((list) =>
      list.concat([{ key: randomNumber(), role: "user", text: v }])
    );
    setSearchVal("");
  };

  useLayoutEffect(() => {
    listRef.current?.scrollTo({
      top: listRef.current.scrollHeight,
      behavior: "smooth",
    });
  }, [list]);

  return (
    <div className="flex flex-col bg-[#e8eaee]">
      <div
        ref={listRef}
        className="flex-1 min-h-[200px] max-h-[400px] overflow-auto py-[16px] px-[8px]"
      >
        <Condition condition={list.length === 0}>
          <Empty description="没有对话内容" />
        </Condition>
        {list.map((item) => {
          let content: any = (
            <pre
              className={[
                "whitespace-pre-wrap inline-block rounded-lg p-[6px]",
                item.role === "user" ? "bg-[#93e77b]" : "bg-white",
              ]
                .filter(Boolean)
                .join(" ")}
              dangerouslySetInnerHTML={{ __html: md.render(
                item.text.replace(/([^\n])\n([^\n])/g, "$1\n\n$2")
              )?.trim() }}
            ></pre>
          );

          switch (item.type) {
            case "file":
              content = (
                <div
                  className="flex flex-row bg-white w-[200px] p-[8px]"
                  title={item.name}
                >
                  <div className="flex flex-col flex-1 min-w-0 cursor-pointer">
                    <div className="w-full overflow-hidden whitespace-nowrap text-ellipsis">
                      {item.name}
                    </div>
                    <div className="text-[12px] text-[#aaa]">{item.size}</div>
                  </div>
                  <FileWordFilled
                    className="text-[#28508b]"
                    style={{ fontSize: 32 }}
                    color="#28508b"
                  />
                </div>
              );
              break;
          }

          if (item.role === "lawer") {
            return (
              <div
                key={item.key}
                className="flex flex-row items-start p-[8px] gap-[10px] justify-start"
              >
                <div className="py-[6px]">
                  <img src="/images/logo-mini.png" className="w-[24px]" />
                </div>
                <div className="flex-1 min-w-0">{content}</div>
              </div>
            );
          } else {
            return (
              <div
                key={item.key}
                className="flex flex-row items-start p-[8px] gap-[10px] justify-start"
              >
                <div className="flex-1 min-w-0 flex flex-row justify-end">
                  {content}
                </div>
                <div className="py-[6px]">
                  <img src="/images/user.svg" className="w-[24px]" />
                </div>
              </div>
            );
          }
        })}
      </div>
      <div className="flex flex-row border-[#e2e2e2] border border-solid px-[8px] py-[8px] bg-white gap-[8px]">
        <div className="flex-1 min-w-0">
          <Input.TextArea
            variant="borderless"
            placeholder="输入您的问题"
            autoSize={{ minRows: 1, maxRows: 6 }}
            value={searchVal}
            onChange={(e) => setSearchVal(e.target.value)}
          />
        </div>
        {/* <Button type="primary" shape="circle">
          <FileAddOutlined />
        </Button> */}
        <Button type="primary" shape="circle" onClick={onSendMsg}>
          <SendOutlined />
        </Button>
      </div>
    </div>
  );
}
